<template>
  <transition name="slid">
    <musicList :songs="songs" :title="title" :bgimage="bgimage"></musicList>
  </transition>
</template>
<script>
  import {
    mapGetters
  } from "vuex"
  import {
    getSingerDetail
  } from "@/api/singer"
  import {
    ERR_OK
  } from "@/api/config"
  import {
    createSong
  } from '@/assets/js/song'
  import musiclist from "@/components/musiclist/musiclist"
  export default {
    name: "component_name",
    data() {
      return {
        songs: []
      };
    },
    methods: {
      async _getSingerDetail() {
        try {
          const res = await getSingerDetail(this.singer.mid)
          if (ERR_OK == res.code) {
            this.songs = this._normalizeSongs(res.data.list)
          }
        } catch (error) {
          console.log(error)
        }
      },
      _normalizeSongs(list) {
        let ret = []
        list.forEach((item) => {
          let {
            musicData
          } = item
          if (musicData.songid && musicData.albummid) {
            ret.push(createSong(musicData))
          }
        })
        return ret
      }
    },
    computed: {
      ...mapGetters([
        "singer"
      ]),
      title(){
        return this.singer.name
      },
      bgimage(){
         return this.singer.avatar
      }
    },
    created() {
      this._getSingerDetail()
    },
    components: {
      "musicList":musiclist
    }
  }

</script>
<style lang="scss" scoped>
  .slid-enter-active,
  .slid-leave-active {
    transition: all 0.3s;
  }

  .slid-enter,
  .slid-leave-to {
    transform: translate3d(100%, 0, 0)
  }

</style>
